<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>菜单对象管理</title>
	<meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
</head>
<body>
<div class="main-content">
    <tags:breadcrumb menuId="微信菜单管理" />
    <div class="page-content">
        <div style="margin-bottom: 5px;margin-left: 5px;">
            <select name="account" id="account">
                <c:forEach items="${accountList}" var="account">
                    <option value="${account.id}" <c:if test="${account.id eq accountId}">selected</c:if>>${account.accountName}</option>
                </c:forEach>
            </select>
            <input type="button" name="syncMenuBtn" id="syncMenuBtn" value="同步菜单" onclick="syncMenu();" class="btn btn-warning btn-sm"/>
            <input type="button" name="applyMenuBtn" id="applyMenuBtn" value="应用更改" onclick="uploadMenu();" class="btn btn-info  btn-sm"/>
        </div>
        <table id="treeTable" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>菜单名称</th>
                <th>菜单类型</th>
                <th>消息类型</th>
                <th>消息模板</th>
                <th>顺序</th>
                <shiro:hasPermission name="wechat:menuEntity:view">
                    <th>操作</th>
                </shiro:hasPermission></tr>
            </thead>
            <tbody>
            <c:forEach items="${list}" var="menuEntity">
                <tr id="${menuEntity.id}" pId="${menuEntity.fatherid ne '1' ? menuEntity.fatherid : '0'}">
                    <td><a href="javascript:;" onclick="treeTableTrtoggle('${menuEntity.id}');">${menuEntity.name}</a></td>
                    <td>${menuEntity.type}</td>
                    <td>${menuEntity.msgtype}</td>
                    <td>${menuEntity.templatename}</td>
                    <td>${menuEntity.orders}</td>
                    <shiro:hasPermission name="wechat:menuEntity:view"><td>
                        <a href="javascript:;" onclick="addMenu('${menuEntity.id}');">添加</a>
                        <a href="javascript:;" onclick="update('${menuEntity.id}');">修改</a>
                        <a href="javascript:;" onclick="deleteMsg('确认要删除该菜单对象吗？','${ctx}/wechat/menuEntity/delete?id=${menuEntity.id}',this);">删除</a>
                    </td></shiro:hasPermission>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加菜单</h4>
            </div>
            <div class="modal-body">
                <form:form id="inputForm" modelAttribute="menuEntity" action="" method="post" class="form-horizontal">
                    <form:hidden path="id" />
                    <form:hidden path="templatename" />
                    <form:hidden path="accountid"/>
                    <div class="form-group">
                        <label class="col-sm-2 no-padding-right control-label">菜单名称:</label>
                        <div class="col-sm-8">
                            <form:input path="name" htmlEscape="false" maxlength="10" cssClass="required" />
                            <span class="important">*</span>
                        </div>
                    </div><hr>
                    <div class="form-group">
                        <label class="col-sm-2 no-padding-right control-label">上级菜单:</label>
                        <div class="col-sm-8">
                            <form:select path="fatherid">
                                <form:option value="">---请选择---</form:option>
                                <form:option value="1">一级菜单</form:option>
                                <form:options items="${list}" itemValue="id" itemLabel="name" />
                            </form:select>
                            <span class="important">*</span>
                        </div>
                    </div><hr>
                    <div class="form-group">
                        <label class="col-sm-2 no-padding-right control-label">动作设置:</label>
                        <div class="col-sm-8">
                            <form:select path="type" cssClass="required col-sm-8">
                                <form:option value="click">消息触发类</form:option>
                                <form:option value="view">网页点击类</form:option>
                            </form:select>
                            <span class="important">*</span>
                        </div>
                    </div><hr>
                    <div class="newsType">
                    <div class="form-group">
                        <label class="col-sm-2 no-padding-right control-label">消息类型:</label>
                        <div class="col-sm-8">
                            <input type="radio" name="msgtype" value="text">文本
                            <input type="radio" name="msgtype" value="news">图文
                            <input type="radio" name="msgtype" value="expend">扩展
                            <span class="important">*</span>
                        </div>
                    </div><hr>
                    <div class="form-group template">
                        <label class="col-sm-2 no-padding-right control-label">消息模板:</label>
                        <div class="col-sm-8">
                            <div class="textTemplate">
                                <select name="templateid">
                                    <option value="">----请选择----</option>
                                    <c:forEach items="${textTemplateList}" var="textTemplate">
                                        <option value="${textTemplate.id}">${textTemplate.templatename}</option>
                                    </c:forEach>
                                </select>
                                <span class="important">*</span>
                            </div>
                            <div class="newsTemplate" style="display:none;">
                                <select name="templateid">
                                    <option value="">----请选择----</option>
                                    <c:forEach items="${newListTypeList}" var="newListType">
                                        <option value="${newListType.id}">${newListType.typeName}</option>
                                    </c:forEach>
                                </select>
                                <span class="important">*</span>
                            </div>
                        </div>
                    </div><hr>
                    </div>
                    <div class="form-group viewUrl" style="display: none;">
                        <label class="col-sm-2 no-padding-right control-label">访问URL:</label>
                        <div class="col-sm-8">
                            <form:input path="url" htmlEscape="false" maxlength="100" cssClass="col-sm-10 required"/>
                            <span class="important">*</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 no-padding-right control-label">菜单标识:</label>
                        <div class="col-sm-8">
                            <form:input path="menukey" htmlEscape="false" maxlength="10" cssClass="required"/>
                            <span class="important">*</span>
                        </div>
                    </div><hr>
                    <div class="form-group">
                        <label class="col-sm-2 no-padding-right control-label">顺序:</label>
                        <div class="col-sm-8">
                            <form:input path="orders" htmlEscape="false" maxlength="3" cssClass="required"/>
                            <span class="important">*</span>
                        </div>
                    </div>
                </form:form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btnSubmit">确定</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#treeTable").treeTable({expandLevel : 2});

        //切换菜单类别
        $("#type").change(function(){
            var type = $("#type").val();
            if("click"==type){
                $(".newsType").show();
                $(".viewUrl").hide();
            }else{
                $(".viewUrl").show();
                $(".newsType").hide();
            }
        });

        $("#btnSubmit").click(function(){
            var url = "${ctx}/wechat/menuEntity/save";
            if($("#inputForm").valid()){
                $.post(url,$("#inputForm").serialize(),function(data){
                    if(data.success){
                        showNote("success", function () {
                            window.location.href = "${ctx}/wechat/menuEntity/list";
                        }, data.msg);
                    }else {
                        showNote("error", function () {
                            return false;
                        }, data.msg);
                    }
                });
            }else{
                showNote("error", function () {
                    return false;
                }, "请填写正确的信息");
            }
        });

        //加载模板
        $("input:radio[name='msgtype']").change(function(){
            var msgtype = $("input:radio[name='msgtype']:checked").val();
            if("expend"==msgtype){
                $(".template").hide();
            }else if("news"==msgtype){
                //查询图文模板
                $(".template").show();
                $(".newsTemplate").show();
                $(".textTemplate").hide();
            }else if("text"==msgtype){
                //查询文本模板
                $(".template").show();
                $(".newsTemplate").hide();
                $(".textTemplate").show();
            }
        });

        //切换公众号
        $("#account").change(function(){
            var accountId = $("#account").val();
            window.location.href = "${ctx}/wechat/menuEntity/list?accountId="+accountId;
        });
    });

    //添加菜单
    function addMenu(id){
        $("#fatherid").find("option[value='"+id+"']").attr("selected",true);
        $("#accountid").val($("#account").val());
        $("#myModal").modal();
    }

    //修改菜单
    function update(id) {
        var url = "${ctx}/wechat/menuEntity/find";
        $.post(url,{id:id},function(data){
            $("#id").val(data.id);
            $("#accountid").val(data.accountid);
            $("#templatename").val(data.templatename);
            $("#name").val(data.name);
            $("#fatherid").find("option[value='"+data.fatherid+"']").attr("selected",true);
            $("#type").find("option[value='"+data.type+"']").attr("selected",true);
            var msgtype = data.msgtype;
            if(msgtype=="expend"){
                $(".template").hide();
            }else if(msgtype == "text"){
                $(".template").show();
                $(".textTemplate").show();
                $(".newsTemplate").hide();
            }else if(msgtype == "news"){
                $(".template").show();
                $(".textTemplate").hide();
                $(".newsTemplate").show();
            }
            $("input[name='msgtype'][value='"+msgtype+"']").attr("checked",true);
            $("select[name='templateid']").find("option[value='"+data.templateid+"']").attr("selected",true);
            $("#menukey").val(data.menukey);
            $("#orders").val(data.orders);
            $("#myModal").modal();
        });
    }

    function page(n,s){
        $("#pageNo").val(n);
        $("#pageSize").val(s);
        $("#searchForm").submit();
        return false;
    }

    //删除
    function deleteMsg(msg,href,tr){
        layer.confirm(msg,{icon:2},function(index){
            layer.close(index);
            $.post(href,function(data){
                if(data.success){
                    showNote("success", function () {
                        $(tr).parent().parent().remove();
                    }, data.msg, "center");
                }else {
                    showNote("error", function () {
                        return false;
                    }, data.msg);
                }
            });
        });
    }

    //同步菜单
    function syncMenu(accountId){
        layer.confirm("确定要同步菜单吗,将替换现有系统中的菜单,此操作无法恢复",{icon:3,title:"风险提示"},function(index){
            layer.close(index);
            loading();
            var accountId = $("#account").val();
            $.post("${ctx}/wechat/menuEntity/syncMenu",{accountId:accountId},function(data){
                if(data.success){
                    showNote("success", function () {
                        window.location.href = "${ctx}/wechat/menuEntity/list";
                    }, data.msg);
                }else{
                    showNote("error", function () {
                        return false;
                    }, data.msg);
                }
            });
        });
    }

    function uploadMenu() {
        layer.confirm("确定要修改菜单吗,修改24小时后将生效",{icon:3,title:"温馨提示"},function(index){
            layer.close(index);
            loading();
            var accountId = $("#account").val();
            $.post("${ctx}/wechat/menuEntity/uploadMenu",{accountId:accountId},function(data){
                if(data.success){
                    showNote("success", function () {
                        window.location.href = "${ctx}/wechat/menuEntity/list";
                    }, data.msg);
                }else{
                    showNote("error", function () {
                        return false;
                    }, data.msg);
                }
            });
        });
    }
</script>
</body>
</html>
